<!-- 获取 商品编码 productSn -->
<template>
  <el-autocomplete v-model="values" :placeholder="placeholder" :fetch-suggestions="querySearch" @select="handleSelect"
                   :size="size"></el-autocomplete>
</template>

<script>
import { GetProductSn } from '@/api/onlineMan'
export default {
  name: '',
  data () {
    return {
      values: '',
      loading: false,
      options: []
    }
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入商品编码'
    },
    pageNum: {
      type: Number,
      default: 1
    },
    productType: {
      // 类型： 1： 商品编码 2： Sku编码
      type: Number,
      default: 1
    },
    size: {
      type: String,
      default: 'medium'
    }
  },
  mounted () {
    this.values = this.value
    this.handleRequest()
  },
  watch: {
    'values': function (val) {
      this.$emit('input', val)
    }
  },
  methods: {
    handleSelect (value) {
      this.$emit('input', value.nickname)
    },
    handleRequest () {
      this.loading = true
      GetProductSn({ count: this.pageNum, type: this.productType }).then(res => {
        const data = res.data
        let list = []
        if (data && data.list.length > 0) {
          data.list.forEach(item => {
            list.push({
              value: item
            })
          })
        }
        this.options = list
        this.values = this.options[0].value
      }).catch(() => {
        this.loading = false
      })
    },
    querySearch (queryString, cb) {
      const options = this.options
      let results = queryString ? options.filter(this.createFilter(queryString)) : options
      cb(results)
    },
    createFilter (queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    }
  }

}

</script>
